<script setup lang="ts">
import { ref, reactive, onMounted, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { addBalance, getBalance } from '@/utils/useWeb3'
import { ElMessage, ElMessageBox } from 'element-plus'

const wallet = reactive(JSON.parse(localStorage.getItem('wallet') as string) || {})
// const web3 = new Web3(
//   Web3.givenProvider || 'https://sepolia.infura.io/v3/88b2bd48430847fab3c22b93a7c07d69'
// )
const account = ref(wallet.address ? wallet.address : '')
const balance = ref(0)

const router = useRouter()
const visiable = ref(localStorage.getItem('hasLogin') != null)
// const votoContract = new web3.eth.Contract(
//   mtcContract.abi,
//   '0x2e9e2963d9478314ac83cffb4f7899a00e2ae580'
// )
//'0x2e9e2963d9478314ac83cffb4f7899a00e2ae580'
const data = ref({
  cnsName: '',
  contractAbi: [
    {
      constant: true,
      funcId: 7,
      inputs: [
        {
          name: 'account',
          type: 'address',
          value: account.value
        }
      ],
      name: 'balanceOf',
      outputs: [
        {
          name: '',
          type: 'uint256'
        }
      ],
      payable: false,
      stateMutability: 'view',
      type: 'function'
    }
  ],
  contractAddress: '0x7b577ff4e056113765022c32a7157bffcb5de7b3',
  contractId: 200003,
  contractName: 'MyToken',
  funcName: 'balanceOf',
  funcParam: [account.value],
  groupId: '1',
  useCns: false,
  user: '',
  version: ''
})

/**
 * 获取账户地址
 */
const getAccount = async () => {
  // const accounts = await ethereum.request({ method: 'eth_requestAccounts' })

  account.value = wallet.address
}

/**
 * 获取用户余额
 */
const getBalances = async () => {
  balance.value = await getBalance(account.value)
}

const buy = ()=>{
  ElMessageBox.prompt('请输入碳币数量', '充值', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel'
  })
    .then(async ({ value }) => {
      // console.log(value)
      const res = await addBalance(wallet.address, value)
      console.log(res)
      if (res.status === 0) {
        ElMessage({
          type: 'success',
          message: `成功充值碳币:${value}`
        })
        setTimeout(()=>{
          window.location.reload()
        },2000)
      }else{
        ElMessage({
          type: 'error',
          message: `成功充值碳币:${value}`+"-区块链异常"
        })
      }

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled'
      })
    })
}
onMounted(async () => {
  await getAccount()
  await getBalances()
})
watchEffect(() => {
  console.log('info',wallet.keystore)
  console.log('info',visiable.value)
  if(!wallet)
  {
    router.push({
      path: '/user/maskIndex'
    })
  }
  else if (!visiable.value) {
    router.push({
      path: '/user/mask/login'
    })
  }
})
</script>

<template>
  <div id="maskInfo">
    <el-card class="box-card" shadow="always">
      <template #header>
        <div class="card-header">
          <h2 style="text-align: center">账户详情</h2>
        </div>
      </template>
      <br />
      <br />
      <el-space style="position: absolute; left: 50%">
        <p>当前账户</p>
        <p>{{ account }}</p>
      </el-space>
      <br />
      <br />
      <br />
      <br />
      <el-space style="position: absolute; left: 50%">
        <p>余额</p>
        <p>{{ balance }}</p>
      </el-space>
      <br />
      <br />
      <br />
      <br />
      <template #footer>
        <br />
        <br />
        <el-button type="primary" style="position: absolute; left: 50%" @click="buy">购买</el-button>
        <el-button type="primary" style="position: absolute; left: 70%">兑换</el-button>
      </template>
    </el-card>
  </div>
</template>

<style scoped>
#maskInfo {
}

.box-card {
  height: 600px;
  width: 100%;
}
</style>
